<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="type" class="movement">
          <el-cascader
            clearable
            v-model="formInline.type"
            :options="options"
            :props="{
              label: 'name',
              value: 'id',
              checkStrictly: true,
              emitPath: false,
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-select v-model="formInline.brand" clearable placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态" class="movement">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增商品</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          :index="indexMethod"
          type="index"
          label="序号"
          width="70"
        >
        </el-table-column>
        <el-table-column prop="name" align="center" label="商品名称">
        </el-table-column>
        <el-table-column align="center" label="商品图片">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="imgHeader + scope.row.imgShow"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryTS" align="center" label="商品类型">
        </el-table-column>
        <el-table-column prop="brand_id" align="center" label="商品品牌">
        </el-table-column>
        <el-table-column prop="store_nums" align="center" label="商品库存">
        </el-table-column>
        <el-table-column prop="size" align="center" label="商品尺寸">
        </el-table-column>
        <el-table-column prop="weight" align="center" label="商品重量">
        </el-table-column>
        <el-table-column prop="volume" align="center" label="商品体积">
        </el-table-column>
        <el-table-column prop="sell_price" align="center" label="商品价格">
        </el-table-column>
        <el-table-column prop="status" align="center" label="商品状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_del"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="2"
              active-text="上架"
              inactive-text="下架"
              @change="ifLook(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="sanChu(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :title="titleText"
    >
      <el-form
        :model="formLabelAlign"
        label-width="100px"
        ref="form"
        :rules="rules"
        :inline="true"
      >
        <div class="oneLine">
          <el-form-item label="商品名称" prop="name">
            <el-input
              v-model="formLabelAlign.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品单位" prop="unit">
            <el-input
              v-model="formLabelAlign.unit"
              placeholder="请输入商品单位"
            ></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品颜色" prop="color">
            <el-input
              v-model="formLabelAlign.color"
              placeholder="请输入商品颜色"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品编号">
            <el-input
              v-model="formLabelAlign.seria"
              placeholder="无需添加,自动生成"
              disabled
            ></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品价格" prop="price">
            <el-input
              v-model="formLabelAlign.price"
              placeholder="请输入商品价格"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品类型" prop="type">
            <el-cascader
              v-model="formLabelAlign.type"
              :options="goodsType"
              :props="{
                label: 'name',
                value: 'id',
                checkStrictly: true,
                emitPath: false,
              }"
              clearable
            ></el-cascader>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品品牌" prop="brand">
            <el-select
              v-model="formLabelAlign.brand"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品库存" prop="inventory">
            <el-input
              v-model="formLabelAlign.inventory"
              placeholder="请输入商品库存"
            ></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品产地" prop="origin">
            <el-input
              v-model="formLabelAlign.origin"
              placeholder="请输入商品产地"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品材质" prop="material">
            <el-input
              v-model="formLabelAlign.material"
              placeholder="请输入商品材质"
            ></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品型号" prop="ModelNumber">
            <el-input
              v-model="formLabelAlign.ModelNumber"
              placeholder="请输入商品型号"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="weight">
            <div class="within">
              <el-input
                v-model="formLabelAlign.weight"
                placeholder="请输入商品重量"
              ></el-input>
              <div class="withinSpan">kg</div>
            </div>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="商品尺寸" prop="size">
            <el-input
              v-model="formLabelAlign.size"
              placeholder="请输入商品尺寸"
            ></el-input>
          </el-form-item>
          <el-form-item label="体积单位" prop="unit_val">
            <el-select v-model="formLabelAlign.unit_val" placeholder="请选择">
              <el-option
                v-for="item in unitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="oneLines">
          <el-form-item label="商品体积" required class="volume">
            <el-form-item prop="long"
              >长<el-input
                name=""
                id=""
                v-model="formLabelAlign.long"
                class="input"
                :min="0"
                :max="10000"
              ></el-input
            ></el-form-item>
            x
            <!-- type="number" -->
            <el-form-item prop="width"
              >宽<el-input
                name=""
                id=""
                v-model="formLabelAlign.width"
                class="input"
                :min="1"
                :max="10000"
              ></el-input></el-form-item
            >x
            <el-form-item prop="height"
              >高<el-input
                name=""
                id=""
                v-model="formLabelAlign.height"
                class="input"
                :min="0"
                :max="10000"
              ></el-input
            ></el-form-item>
          </el-form-item>
          <!-- <el-form-item label="商品体积" class="volume">
            长
            <el-input
              class="long"
              v-model="formLabelAlign.long"
              placeholder="请输入长"
            ></el-input>
            *宽
            <el-input
              class="long"
              v-model="formLabelAlign.width"
              placeholder="请输入宽"
            ></el-input>
            *高
            <el-input
              class="long"
              v-model="formLabelAlign.height"
              placeholder="请输入高"
            ></el-input
            >m*3
          </el-form-item> -->
        </div>

        <div class="oneLine">
          <el-form-item label="是否可以截断">
            <el-radio-group v-model="truncation">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否门店热销">
            <el-radio-group v-model="ishot">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <div class="oneLine1">
          <el-form-item label="商品图片">
            <div class="unlodBox">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFiles"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
                multiple
              >
                <!-- <el-image
                  v-if="imageUrl"
                  class="imageGood"
                  :src="imageUrl"
                  style="width: 360px; height: 180px"
                ></el-image> -->
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
              <div class="imageBox">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <draggable v-model="imgShowList">
                    <li
                      v-for="(item, index) in imgShowList"
                      :key="index"
                      class="el-upload-list__item is-success animated"
                    >
                      <img
                        :src="imgHeader + item"
                        alt=""
                        class="el-upload-list__item-thumbnail"
                      />
                      <i class="el-icon-close"></i>
                      <span class="el-upload-list__item-actions">
                        <!-- 预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreviewFileDetail(item)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 删除 -->
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemoveFileDetail(index)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </draggable>
                </ul>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="oneLine1">
          <el-form-item label="产品详情">
            <div class="unlodBox">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFiles1"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList1"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
                multiple
              >
                <!-- <el-image
                  v-if="imageUrl"
                  class="imageGood"
                  :src="imageUrl"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
              <div class="imageBox">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <draggable v-model="imgShowList1">
                    <li
                      v-for="(item, index) in imgShowList1"
                      :key="index"
                      class="el-upload-list__item is-success animated"
                    >
                      <img
                        :src="imgHeader + item"
                        alt=""
                        class="el-upload-list__item-thumbnail"
                      />
                      <i class="el-icon-close"></i>
                      <span class="el-upload-list__item-actions">
                        <!-- 预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreviewFileDetail1(item)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 删除 -->
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemoveFileDetail1(index)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </draggable>
                </ul>
              </div>
            </div>
          </el-form-item>
        </div>
        <div oneLine>
          <el-form-item label="购买须知" prop="content">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formLabelAlign.content"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="btnBox">
        <el-button
          type="primary"
          dialogVisible
          class="confirm"
          @click="submitData()"
          >返 回</el-button
        >
        <el-button type="primary" dialogVisible class="confirm" @click="save"
          >确 认</el-button
        >
      </div>
    </el-dialog>
    <!-- 预览弹出层 -->
    <el-dialog :visible.sync="dialogVisibleDetail" class="imageDia">
      <el-image :src="imgHeader + dialogImageDetailUrl"></el-image>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  uploadFiles,
  productList,
  saveZhucaiGoods,
  genreList,
  getzhucaiList,
  shangxiajia,
  allBrand,
} from "../../../../utils/api";
import {
  getHardwareGoods,
  delHardwareGoods,
  addHardwareGoods,
} from "../../../../utils/main";
import { compressImage } from "../../../../assets/js/compressImage";
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      options: [],
      options1: [],
      unitOptions: [
        {
          value: "1",
          label: "mm",
        },
        {
          value: "2",
          label: "cm",
        },
        {
          value: "3",
          label: "m",
        },
      ],
      imgHeader: this.Global.imgHeader,

      statusList: [
        {
          value: "1",
          label: "上架",
        },
        {
          value: "2",
          label: "下架",
        },
      ],
      formLabelAlign: {
        name: "",
        sort: "",
        avatar: "",
        unit_val: "1",
      },
      goodsType: [],
      brandList: [],
      fileLimit: 8,
      //   上传图片
      dialogImageDetailUrl: "",
      dialogVisibleDetail: false,
      fileList: [],
      fileList1: [],
      imgShowList: [],
      imgShowList1: [],
      headers: { "Content-Type": "multipart/form-data" },
      fileType: ["png", "jpg", "jpeg"],
      loading: false,
      token: sessionStorage.getItem("token"),
      seller_id: sessionStorage.getItem("seller_id"),
      // seller_id: 8,
      dialogVisible: false,
      srcList2: {},
      formInline: {
        status: "",
        name: "",
        number: "",
        type: "",
        brand: "",
      },
      tableData: [],
      parameter: {
        common: "",
      },
      total: 0,
      limit: 10,
      page: 1,
      name: "",
      status: "",
      currentPage: 1,
      type: 2,
      imageUrl: "",
      titleText: "",
      parent_id: "0",
      status: "",
      value: "",
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        unit: [{ required: true, message: "请输入商品单位", trigger: "blur" }],
        color: [{ required: true, message: "请输入商品颜色", trigger: "blur" }],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        size: [{ required: true, message: "请输入商品尺寸", trigger: "blur" }],
        type: [
          { required: true, message: "请输入商品类型", trigger: "change" },
        ],
        brand: [
          { required: true, message: "请输入商品品牌", trigger: "change" },
        ],
        inventory: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(0|[1-9]\d*)$/;
              if (!reg.test(value)) {
                callback(new Error("请输入不小于0的整数"));
              }
              if (value > 999999999) {
                callback(new Error("不能大于999999999"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        origin: [
          { required: true, message: "请输入商品产地", trigger: "blur" },
        ],
        material: [
          { required: true, message: "请输入商品材质", trigger: "blur" },
        ],
        ModelNumber: [
          { required: true, message: "请输入商品型号", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        unit_val: [
          { required: true, message: "请选择体积单位", trigger: "change" },
        ],
        long: [
          { required: true, message: "请输入长", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              // if (!reg.test(value)) {
              //   callback(new Error("请输入大于0且不超过两位小数的数字"));
              // }
              if (Number.isNaN(Number(value))) {
                callback(new Error("请输入数字"));
              }
              if (value < 0) {
                callback(new Error("不能小于0"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        height: [
          { required: true, message: "请输入高", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              // if (!reg.test(value)) {
              //   callback(new Error("请输入大于0且不超过两位小数的数字"));
              // }
              // if (value > 99999999.99) {
              //   callback(new Error("不能大于99999999.99"));
              // }
              if (Number.isNaN(Number(value))) {
                callback(new Error("请输入数字"));
              }
              if (value < 0) {
                callback(new Error("不能小于0"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        width: [
          { required: true, message: "请输入宽", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              // if (!reg.test(value)) {
              //   callback(new Error("请输入大于0且不超过两位小数的数字"));
              // }
              // if (value > 99999999.99) {
              //   callback(new Error("不能大于99999999.99"));
              // }
              if (Number.isNaN(Number(value))) {
                callback(new Error("请输入数字"));
              }
              if (value < 0) {
                callback(new Error("不能小于0"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入购买须知", trigger: "blur" },
        ],
      },
      truncation: 0,
      ishot: 0,
    };
  },
  methods: {
    clearData() {
      this.formLabelAlign = {};
      this.imgShowList = [];
      this.imgShowList1 = [];
      this.fileList = [];
      this.fileList1 = [];
      this.ishot = 0;
      this.truncation = 0;
    },
    // handleChangeType(e) {
    //   // this.editDetail.brand_id = "";
    //   // this.category_id = this.editDetail.category_ids;
    //   this.getSelectList(e);
    // },
    // async getSelectList(e) {
    //   // this.loading = true;
    //   let res = await getSelectList(e);
    //   if (res.data.status) {
    //     this.brandList = res.data.data || [];
    //     // this.resUSer = res.data.data.brand_data;
    //     // console.log(this.options1);
    //     // this.total = res.data.data.count;
    //     // console.log(this.total, shouchu);
    //     // let timer = setTimeout(() => {
    //     //   this.loading = false;
    //     //   clearTimeout(timer);
    //     // }, 400);
    //   } else {
    //     if (res.data.message == "token失效,请重新进行登录") {
    //       this.$router.push("/materilsLogin");
    //     }
    //     if (res.data.message == "此账号没有权限") {
    //       this.$message.error(res.data.message);
    //       this.loading = false;
    //     }
    //     // let timer = setTimeout(() => {
    //     //   this.$message.error(res.data.message);
    //     // }, 5000);
    //   }
    // },
    // 获取商品品牌
    async getBrandSelectList() {
      // this.loading = true;
      let type = 2;
      let res = await allBrand(this.token, type);
      if (res.data.status) {
        this.brandList = res.data.data || [];
        // this.resUSer = res.data.data.brand_data;
        // console.log(this.options1);
        // this.total = res.data.data.count;
        // console.log(this.total, shouchu);
        // let timer = setTimeout(() => {
        //   this.loading = false;
        //   clearTimeout(timer);
        // }, 400);
      } else {
        if (res.data.message == "token失效,请重新进行登录") {
          this.$router.push("/materilsLogin");
        }
        if (res.data.message == "此账号没有权限") {
          this.$message.error(res.data.message);
          this.loading = false;
        }
        // let timer = setTimeout(() => {
        //   this.$message.error(res.data.message);
        // }, 5000);
      }
    },
    genreLists() {
      genreList(this.token)
        .then((res) => {
          if (res.data.status) {
            let list = res.data.data;
            console.log(
              list.find((e) => {
                return e.name == "五金店";
              })
            );
            this.goodsType = list.find((e) => {
              return e.name == "五金店";
            }).children;
            this.options = list.find((e) => {
              return e.name == "五金店";
            }).children;
          } else {
            if (res.data.message == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.message == "此账号没有权限") {
              this.$message.error(res.data.message);
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.message);
            }, 5000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },

    handleRemoveFileDetail(index) {
      this.imgShowList.splice(index, 1);
      this.fileList.splice(index, 1); //删除上传的文件
    },
    handleRemoveFileDetail1(index) {
      this.imgShowList1.splice(index, 1);
      this.fileList1.splice(index, 1); //删除上传的文件
    },
    handlePictureCardPreviewFileDetail(file) {
      this.dialogImageDetailUrl = file;
      this.dialogVisibleDetail = true;
    },
    handlePictureCardPreviewFileDetail1(file) {
      this.dialogImageDetailUrl = file;
      this.dialogVisibleDetail = true;
    },
    ifLook(row) {
      console.log(row);
      delHardwareGoods(this.token, row.id, row.is_del).then((res) => {
        if (res.data.status) {
          this.$message.success(res.data.msg);
        }
      });
    },
    // 返回
    submitData() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    //查询
    onSubmit() {
      // this.opinionsS();
      // this.name = this.formInline.name;
      // this.status = this.formInline.status;
      if (this.formInline.type == null) {
        this.formInline.type = "";
      }
      this.page = 1;
      this.getList();
    },
    handleReset() {
      // this.name = "";
      // this.status = "";
      this.formInline.name = "";
      this.formInline.status = "";
      (this.formInline.type = ""), (this.formInline.brand = ""), this.getList();
    },

    //序号
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.currentPage - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
      this.$refs.form.resetFields();
      this.clearData();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      // this.opinionsS();
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      // this.opinionsS();
      this.getList();
    },
    // 新增
    handleAdd() {
      this.formLabelAlign = {};
      this.dialogVisible = true;
      this.titleText = "新增商品";
    },
    // 编辑
    async handleEdit(row) {
      if (row.is_del == 0 || row.is_del == 3) {
        this.$message.warning("上架时不能编辑");
        return;
      }
      let obj = JSON.parse(JSON.stringify(row));
      obj.price = obj.sell_price;
      obj.type = obj.category_id;
      // let res = await getSelectList(obj.category_id);
      // this.brandList = res.data.data.brand_data || [];
      obj.brand = obj.brand.id;
      obj.inventory = obj.store_nums;
      obj.material = obj.texture;
      obj.ModelNumber = obj.model;
      obj.seria = obj.goods_no;
      obj.content = obj.notice;
      obj.long = obj.length;
      this.truncation = obj.is_break;
      this.ishot = obj.is_join;
      this.imgShowList = obj.img.split(",");
      // console.log("obj.detail_chart", obj.detail_chart);
      if (obj.detail_chart != "") {
        this.imgShowList1 = obj.detail_chart.split(",");
      } else {
        this.imgShowList1 = [];
      }
      // this.imgShowList1 = obj.detail_chart.split(",");
      // console.log("imgShowList1", this.imgShowList1);
      let file = [];
      let file1 = [];
      this.imgShowList.forEach((item, index) => {
        file.push({ uid: index, name: item });
      });
      this.imgShowList1.forEach((item, index) => {
        file1.push({ uid: index, name: item });
      });
      this.fileList = file;
      this.fileList = file1;
      this.formLabelAlign = obj;
      console.log(this.formLabelAlign, 11111);
      this.dialogVisible = true;
      this.titleText = "编辑商品";
    },
    //确定添加
    save() {
      console.log(this.formLabelAlign);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.imgShowList.length == 0) {
            this.$message.error("请上传商品图片");
            return;
          }
          // console.log(this.formLabelAlign, "8888880");
          if (this.formLabelAlign.id != null) {
            addHardwareGoods(
              this.token,
              this.seller_id,
              this.formLabelAlign.name,
              this.formLabelAlign.unit,
              this.formLabelAlign.color,
              this.formLabelAlign.brand,
              this.formLabelAlign.type,
              this.formLabelAlign.price,
              this.formLabelAlign.origin,
              this.formLabelAlign.material,
              this.formLabelAlign.ModelNumber,
              this.formLabelAlign.weight,
              this.truncation,
              this.ishot,
              this.formLabelAlign.inventory,
              this.imgShowList,
              this.formLabelAlign.content,
              this.formLabelAlign.goods_no, //商品编号
              this.formLabelAlign.unit_val,
              this.formLabelAlign.long, //长
              this.formLabelAlign.width, //宽
              this.formLabelAlign.height, //高
              this.formLabelAlign.size, //size
              this.imgShowList1
              // sessionStorage.getItem("user_id")
            ).then((res) => {
              if (res.data.status) {
                this.$message.success({
                  message: "修改成功",
                });
                this.clearData();
                this.total = res.data.data.count;
                // this.formLabelAlign = {};
                this.$refs.form.resetFields();
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            // console.log(this.formLabelAlign, "111");
            // 新增
            addHardwareGoods(
              this.token,
              this.seller_id,
              this.formLabelAlign.name,
              this.formLabelAlign.unit,
              this.formLabelAlign.color,
              this.formLabelAlign.brand,
              this.formLabelAlign.type,
              this.formLabelAlign.price,
              this.formLabelAlign.origin,
              this.formLabelAlign.material,
              this.formLabelAlign.ModelNumber,
              this.formLabelAlign.weight,
              this.truncation,
              this.ishot,
              this.formLabelAlign.inventory,
              this.imgShowList,
              this.formLabelAlign.content,
              "",
              this.formLabelAlign.unit_val,
              this.formLabelAlign.long, //长
              this.formLabelAlign.width, //宽
              this.formLabelAlign.height, //高
              this.formLabelAlign.size, //size
              this.imgShowList1
              // sessionStorage.getItem("user_id")
            ).then((res) => {
              if (res.data.status) {
                this.$message.success({
                  message: "新增成功",
                });
                this.clearData();
                this.total = res.data.data.count;
                // this.formLabelAlign = {};
                this.$refs.form.resetFields();
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 删除
    sanChu(row) {
      if (row.is_del == 0 || row.is_del == 3) {
        this.$message.warning("上架时不能删除");
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          delHardwareGoods(this.token, row.id, 1).then((res) => {
            if (res.data.status) {
              this.$message.success(res.data.message);
              this.getList();
            }
          });
          // delKXXM(row.id).then((res) => {
          //   if (res.data.status) {
          //     this.$message({
          //       type: "success",
          //       message: "删除成功",
          //     });
          //     this.getList();
          //   } else {
          //     this.$message.error(res.data.message);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    handleRemove() {},
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的格式
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    async compressFile(singleFile) {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      let result = await compressImage({
        file: singleFile.raw,
        config,
        fileName: singleFile.name,
      });
      this.srcList2 = result.finalFile;
      console.log("bbb", this.srcList2);
      // console.log("压缩后图片1===>", this.imageList);
    },
    //上传文件的事件
    async uploadFiles(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.imgShowList.push(res.data.data.saveurl);
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     console.log(res);
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     // this.imageUrl1 = res.data.data.saveurl;
      //     // this.imageUrl = res.data.data.weburl;
      //     this.imgShowList.push(res.data.data.saveurl);
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     console.log(item);
      //     console.log(item.file);
      //     // let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    async uploadFiles1(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.imgShowList1.push(res.data.data.saveurl);
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     console.log(res);
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.imgShowList1.push(res.data.data.saveurl);
      //     // this.imageUrl1 = res.data.data.saveurl;
      //     // this.imageUrl = res.data.data.weburl;
      //     this.fileList1.push(item.file); //成功过后手动将文件添加到展示列表里
      //     // let i = this.fileList1.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClosedelete();
    },
    handleClosedelete(i) {
      // this.fileList.splice(i, 1);//删除上传的文件
    },
    // 获取列表
    getList() {
      this.loading = true;
      getHardwareGoods(
        this.token,
        this.seller_id,
        this.formInline.name,
        this.formInline.type,
        this.formInline.brand,
        this.formInline.status,
        this.page,
        this.limit
      ).then((res) => {
        if (res.data.status) {
          this.tableData = res.data.data.data || [];
          this.total = res.data.data.total;
          this.tableData.forEach((item) => {
            if (item.brand) {
              item.brand_id = item.brand.name;
            }
            item.imgShow = item.img.split(",")[0];
            console.log(item.imgShow);
            item.categorys.forEach((item1) => {
              if (item1.category != null) {
                this.categoryS = item1.category;
                item.categoryTS = this.categoryS.name;
              }
            });
          });
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.message == "token失效,请重新进行登录") {
            this.$router.push("/materilsLogin");
          }
          if (res.data.message == "此账号没有权限") {
            this.$message.error(res.data.message);
            this.loading = false;
          }
          let timer = setTimeout(() => {
            this.$message.error(res.data.message);
          }, 5000);
        }
      });
    },
  },
  mounted() {
    // this.opinionsS();
    this.getList();
    this.genreLists();
    this.getBrandSelectList();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}

.oneLine {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 10px;
}
.oneLine .el-form-item {
  width: 45%;
}

.oneLines {
  display: flex;
}

.oneLines .volume {
  display: flex;
}

.volume .long {
  margin: 0 5px;
  width: 100px;
  height: 30px;
}
.volume .el-form-item__content {
  display: flex;
}
.volume .el-form-item__content .el-form-item {
  margin: 0 10px;
}
.volume .el-form-item__content .el-form-item .el-form-item__content {
  display: flex;
  margin-bottom: 10px;
}
.volume .el-form-item__content .el-form-item .el-form-item__content .input {
  width: 100px;
  margin-left: 20px;
}

/* .addP {
  font-size: 22px;
  text-align: center;
  margin-bottom: 10px;
} */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.btnBox {
  display: flex;
  justify-content: center;
}

textarea {
  padding: 10px;
}
.within {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.within .el-input {
  margin-right: 5px;
  width: 90%;
}
</style>